<template>
	<view class="card flex" @click="onItem">
		<view class="avatar">
			<image src="/pages/activity/static/images/no_product.png" mode="widthFix" class="image"></image>
		</view>
		<view class="info">
			<span class="flex justify-between">
				<span class="title">商家名称</span>
				<span class="state">营业中</span>
			</span>
			<span class="flex justify-between margin-top">
				<span class="score p1">5.0分</span>
				<span class="manner">可自提</span>
			</span>
			<span class="flex justify-between margin-top">
				<span class="address p1">浙江省温州市瑞安市瑞安商城楼</span>
				<span class="distance p1">2.3km</span>
			</span>
			<view class="integral">
				<view class="integral-item p1">
					5%
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			
		}
	},
	methods:{
		onItem(){
			console.log("点击")
			this.$emit("onItem",'')
		}
	}
}
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
}
.justify-between{
	justify-content: space-between;
}
.image{
	width: 100%;
	height: 100%;
}
.p1{
	font-size: 24rpx;
}
.margin-top{
	margin-top: 4rpx;
}

.card{
	background-color: white;
	border-radius: 12rpx;
	padding: 12rpx;
	box-shadow: 5rpx 5rpx 5rpx #f3f3f3,-5rpx 5rpx 5rpx #f3f3f3;
}
.avatar{
	height: 140rpx;
	width: 140rpx;
}
.info{
	margin-left: 16rpx;
	flex-grow: 1;
}
.title{
	font-size: 32rpx;
	font-weight: bold;
}
.state{
	font-size: 24rpx;
	color: #19be6b;
}
.score{
	font-weight: bold;
	color: #f29100;
}
.manner{
	border: 1rpx solid #fa3534;
	border-radius: 4rpx;
	color: #fa3534;
	font-size: 20rpx;
	padding: 0 12rpx;
}
.address{
	color: #999;
}
.distance{
	color: #333;
}
.integral{
	.integral-item{
		background: url("https://milife-1327809043.cos.ap-shanghai.myqcloud.com/def/dbf46202408132213599565.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 160rpx;
		height: 48rpx;
		line-height: 48rpx;
		padding-left: 80rpx;
	}
}
</style>